
html, body, .task-detail-container {
  height: 100%;
}

body {
  margin: 12px;
  min-width: 1100px;
  overflow-x: auto;
  overflow-y: hidden;
}

.task-detail-container {
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;

  // 按钮
  .el-button {
    // max-width: 74px;
    min-width: 60px;

    padding-left: 0;
    padding-right: 0;

    font-weight: normal;
    border-radius: 4px;

    &.el-button--small {
      font-size: $font-size-base;
      padding: 8px;
    }
    &.el-button--medium {
      font-size: $font-size-base;
      padding: 8px;
    }
  }

  // 弹窗
  .base-modal {
    .base-modal-body {
      padding: 20px;
  
      .base-modal-content {
        textarea {
          width: 100%;
        }
        
        p {
          margin-bottom: 8px;
  
          &.tips {
            color: #999;
            font-size: 12px;
          }

          &.base-upload-placeholder {
            margin-bottom: 0;
          }
        }
      }

      .el-button {
        min-width: auto;
        max-width: auto;
      }
    }
  
    .base-modal-footer {
      text-align: right;
    }

    .task-back-dialog {
      p {
        font-size: 12px;
      }
    }
  }

  // form-view
  .form-view {
    padding-bottom: 12px !important;

    &.form-view-two-column {
      .items-of-group {
        // display: flex;
        // flex-wrap: wrap;
  
        .form-view-row {
          // width: 50%;
  
          &:nth-child(odd) {
            padding-right: 12px;
            padding-left: 0px;
          }
  
          &:nth-child(even) {
            padding-left: 12px;
          }
        }
      }
    }
  }

  .form-view-row {
    padding: 6px 0;
  }

  // 客户、产品关联工单数量
  .relation-count-button {
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    margin-left: 8px;

    font-size: $font-size-small;
    color: $text-color-regular;

    background: $color-border-l2;
    border-radius: 2px;
    cursor: pointer;
  }

  // 工单状态、已删除
  .task-state,
  .task-delete-status {
    width: 52px;
    min-width: 52px;
    height: 22px;
    line-height: 22px;

    font-size: $font-size-small;
    text-align: center;

    border: 1px solid;
    border-radius: 11px;
  }

  .task-delete-status {
    margin-right: 10px;
    color: #F56C6C;
    border-color: rgba(245, 108, 108, 0.2);
    background-color: rgba(245, 108, 108, 0.2);
  }
}

// 顶部操作区
.task-detail-header {
  padding: 0 16px;
  margin-bottom: 12px;
  position: relative;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);

  .form-view-row {
    padding: 0;

    label {
      width: auto !important;
      margin: 0;
    }

    .form-view-row-content {
      white-space: normal;
      @include text-ellipsis;
    }
  }

  .task-view-containner {
    .form-view-row {
      label {
        margin-right: 10px;
      }
    }
  }

  // 查看全部时间点
  .state-all-btn{
    cursor: pointer;
    margin: 0 0 6px 6px;
    @include fontColor();
    display: inline-block;
  }

  .state-button-group {
    display: inline-block;
  }
  

  // 审批中
  .approving-img {
    width: 90px;
    position: absolute;
    top: 70px;
    right: 60px;
    z-index: 99;

    img {
      width: 100%;
    }
  }

  &-top {
    min-height: 52px;
    max-height: 78px;
    padding: 10px 0;
    display: flex;
    align-items: baseline;

    // 折叠按钮
    .collapse-btn {
      width: 28px;
      height: 28px;
      margin-right: 12px;
      text-align: center;
      cursor: pointer;

      border-radius: 4px;
      border: 1px solid $color-border-l1;

      .iconfont {
        font-size: 20px;
        color: $text-color-regular;
        display: inline-block;
        transition: transform .3s;
      }
    }

    &.active {
      align-items: center;

      .collapse-btn {
        .iconfont {
          transform: rotate(-90deg);
        }
      }
    }

    // 工单流程
    .progress-wrap {
      flex: 1;
      // overflow: hidden;
    }

    // 工单状态
    .task-state {
      margin-left: 30px;
    }

    .linkman-name {
      max-width: 140px;
      min-width: 85px;
      margin-right: 16px;
    }

    .linkman-phone {
      max-width: 160px;
    }

    // 按钮组
    &-btn {
      font-size: 0;

      .el-button {
        margin-left: 8px;

        // 打印工单
        &.once-printed {
          background: $text-color-regular;
          border-color: $text-color-regular;
          color: #fff;
        }
      }
      
      .current-state-button {
        display: inline-block;
      }
    }
  }

  // 客户信息
  .customer-info-wrap {
    margin-right: 30px;
    overflow: hidden;

    flex: 1;
    display: flex;
    align-items: center;

    .customer-name {
      font-size: $font-size-large;
      @include text-ellipsis;
      margin-right: 16px;
    }
  }

  // 联系人
  .linkman-info {
    display: flex;
    align-items: center;

    .linkman-phone {
      .call-phone {
        display: flex;

        span {
          @include text-ellipsis;

          &.call-active {
            cursor: pointer;
          }
        }

        .iconfont {
          margin-left: 6px;
          font-size: 14px;
        }
      }
    }
  }

  &-bottom {
    transition-duration: 300ms;
    height: 132px;
    overflow: hidden;

    &.active {
      height: 0;
    }

    // 客户
    .customer-info-wrap {
      margin-right: 0;
      padding: 4px 0;
      
      .customer-name {
        margin-right: 0;
      }
    }

    &-list {
      display: flex;

      &-item {
        flex: 1;
        height: 90px;
        padding: 6px 20px;
        overflow: hidden;

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;
        }

        &:not(:last-child) {
          border-right: 1px solid $color-border-l2;
        }

        // 联系人
        .linkman-info {
          .linkman-name,
          .linkman-phone {
            flex: 1;
            overflow: hidden;
          }
        }

        // 地址
        .address-info {
          .form-view-row-content {
            max-height: 40px;
            display: -webkit-box;
            white-space: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }

        .biz-process-time {
          max-height: 46px;
          margin-bottom: 6px;
          overflow: auto;

          &-block {
            line-height: 20px;

            &-label {
              color: $text-color-regular;
            }

            &:not(:last-child) {
              margin-bottom: 6px;
            }
          }
        }
      }
    }

    .form-view-row-content {
      margin-bottom: 6px;
    }
  }
}

// 工单详情
.task-detail-main-content {
  flex: 1;

  &-left,
  &-right {
    height: 100%;
    overflow: hidden;
  }

  .collapse-left,
  .collapse-right {
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    color: $text-color-regular;
    border-bottom: 2px solid $color-border-l2;
  }

  // tabs标签页
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    &__header {
      margin: 0;

      .el-tabs__item {
        padding: 0 24px !important;
        color: $text-color-regular;
        font-weight: normal;
  
        &.is-active {
          @include fontColor();
        }
      }
    }

    &__content {
      flex: 1;
      overflow: auto;

      .el-tab-pane {
        height: 100%;
      }
    }
  }
  .task-detail-btn-group {
    position: absolute;
    right: 12px;
    top: 8px;

    font-size: 0;
    z-index: 995;

    .iconfont {
      margin-left: 16px;
      color: $text-color-secondary;
      cursor: pointer;

      &.icon-bianji1 {
        @include fontColor();
      }

      &.icon-shanchu-copy {
        margin-left: 13px;
      }
    }
  }

  .task-detail-btn-group-point{
    z-index: 997;
    background: #fff;
  }

  // 审批中图片
  .approving-img {
    width: 75px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 99;

    img {
      width: 100%;
    }
  }

  .task-tab-container {
    position: relative;
    padding: 12px;
    
    .btn-group {
      font-size: 0;
      padding: 12px 0;
    }
  }
}

// 服务报告
.link-of-dropdown {
  color: $text-color-primary;
  display: block;

  &:hover {
    text-decoration: none;
  }
}

// 客户地址地图
.map-address-title {
  width: 60px;
  color: red;
  font-weight: bold;
  
  position: absolute;
  left: -12px;
}

.map-info-window-content {
  width: 260px;
  padding: 12px 12px 8px;
  margin-bottom: 10px;
  position: relative;

  background-color: #fff;
  border-radius: $button-radius-base;

  .customer-name {
    margin-bottom: 6px;
    font-weight: 500;
  }

  p {
    font-size: $font-size-small;
    margin-bottom: 2px;

    label {
      color: $text-color-regular;
      margin-bottom: 0;
    }
  }

  .info-window-arrow {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 125px;
    bottom: -5px;
    
    background: #fff;
    border: 1px solid $color-border-l2;
    border-top-color: #fff;
    border-left-color: #fff;
    transform: rotate(45deg);
  }
}

.no_data_view{
  background: #fff;
  height: 100%;
  .app-nodata-img-container{
    padding-top: 120px !important;
  }
}